<template>
  <div class="community-building-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button type="success" @click="backUpLevel">返回楼幢列表</el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-row>
      <el-col :span="24">
        <div style="float: left">
          <div style="padding: 20px; font-weight: 500">1单元</div>
          <table class="buildTable">
            <tr>
              <td>701</td>
              <td>702</td>
              <td>703</td>
              <td class="signed">
                <div>704</div>
                <div style="font-size: 12px">王老五家</div>
              </td>
            </tr>
            <tr>
              <td class="reg">
                <div>
                  601
                  <el-badge is-dot />
                </div>
                <div style="font-size: 12px">莱特电气</div>
              </td>
              <td>602</td>
              <td>603</td>
              <td>604</td>
            </tr>
            <tr>
              <td>501</td>
              <td class="reg">502</td>
              <td>503</td>
              <td>504</td>
            </tr>
            <tr>
              <td class="reg">401</td>
              <td>402</td>
              <td class="signed">403</td>
              <td>404</td>
            </tr>
            <tr>
              <td>301</td>
              <td>302</td>
              <td>303</td>
              <td>304</td>
            </tr>
            <tr>
              <td class="signed">201</td>
              <td>202</td>
              <td class="reg">203</td>
              <td>204</td>
            </tr>
            <tr>
              <td>101</td>
              <td class="reg">102</td>
              <td>103</td>
              <td>104</td>
            </tr>
          </table>
        </div>
        <div style="float: left; margin-left: 5px">
          <div style="padding: 20px; font-weight: 500">2单元</div>
          <table class="buildTable">
            <tr>
              <td>701</td>
              <td>702</td>
              <td>703</td>
              <td class="signed">704</td>
            </tr>
            <tr>
              <td class="reg">601</td>
              <td>602</td>
              <td>603</td>
              <td>604</td>
            </tr>
            <tr>
              <td>501</td>
              <td class="reg">502</td>
              <td>503</td>
              <td>504</td>
            </tr>
            <tr>
              <td class="reg">401</td>
              <td>402</td>
              <td class="signed">403</td>
              <td>404</td>
            </tr>
            <tr>
              <td>301</td>
              <td>302</td>
              <td>303</td>
              <td>304</td>
            </tr>
            <tr>
              <td class="signed">201</td>
              <td>202</td>
              <td class="reg">203</td>
              <td>204</td>
            </tr>
            <tr>
              <td>101</td>
              <td class="reg">102</td>
              <td>103</td>
              <td>104</td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { buildingList, doDelete } from '@/api/community'

  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'BuildingShow',

    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const route = useRoute()
      const router = useRouter()
      const state = reactive({
        editRef: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          CommunityID: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const handleEdit = (row) => {
        if (row.id) {
          state.editRef.showEdit(row)
        } else {
          state.editRef.showEdit()
        }
      }
      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await buildingList(state.queryForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      onMounted(() => {
        if (route.query.CommunityID) {
          state.queryForm.CommunityID = route.query.CommunityID
        }
        fetchData()
      })

      const backUpLevel = () => {
        router.push({
          path: '/community/building/buildingIndex',
          query: {
            CommunityID: state.queryForm.CommunityID,
          },
        })
      }

      return {
        ...toRefs(state),
        setSelectRows,
        handleEdit,
        backUpLevel,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>

<style scoped>
  .buildTable {
    border-collapse: collapse;
    border: 2px solid #000;
  }
  .buildTable th,
  td {
    width: 80px;
    height: 50px;
    text-align: center;
    border: 1px solid #999;
  }
  .buildTable td.reg {
    background: #ffdd00;
    color: #000;
  }
  .buildTable td.signed {
    background-color: turquoise;
    color: #000;
  }
</style>
